<template>
  <div id="app">
    <van-row class="top" v-if="this.$store.state.menuIsShow">
      <van-col span="6" style="color: #4D4D4D;text-align: left;padding-left: 20px">
        <van-icon name="wap-nav" @click="showPopup" size="2rem" color="white" v-if="! showMyIcon"/>
      </van-col>
      <van-col span="12" class="logoWrap">
        <img class="myIcon" src="./assets/images/logo.png" v-if="showMyIcon">
        <span>{{this.$store.getters.getTitleName}}</span>
      </van-col>
      <van-col span="6" style="color: #FFF59C;padding-right: 20px" @click="forwardService">
        <div>
          <van-icon name="service-o" size="1.5rem" title="联系客服" style="display: block;text-align: right;padding-right: 12px;"/>
          <span style="font-size: 13px;display: block;text-align: right;">联系客服</span>
        </div>
      </van-col>

    </van-row>
    <van-row>
      <van-col span="24">
        <div class="service-img">
          <img src="./assets/images/service-o.png" width="200" v-if="showServiceTag" @dblclick="forwardService">
        </div>
      </van-col>
    </van-row>
    <van-row style="margin-top: 60px;">
      <van-col span="24">
        <router-view/>
      </van-col>
    </van-row>
    <!-- 图标位置 -->
    <van-popup
            v-model="show"
            closeable
            close-icon-position="top-right"
            position="left"
            :style="{ height: '100%' , width: '50%'}"
    >
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
               :collapse="isCollapse" active-text-color="#ff0000">
        <el-menu-item index="1" @click="jumpNav('signUp')">
          <i class="el-icon-s-home"></i>
          <span slot="title" style="display: inline-block;width: 3.3rem;text-align: left;">学历报名</span>
        </el-menu-item>
        <el-menu-item index="2" @click="jumpNav('signUpQualificationCertificate')">
          <i class="el-icon-s-finance"></i>
          <span slot="title" style="display: inline-block;width: 3.3rem;text-align: left;">资格证书报名</span>
        </el-menu-item>
        <el-menu-item index="3" @click="jumpNav('signUpQueryIndex')">
          <i class="el-icon-s-shop"></i>
          <span slot="title">报名查询</span>
        </el-menu-item>

      </el-menu>
    </van-popup>


    <van-row>
      <van-col span="24">
        <div class="footer">
          @2023 版权所有：学历报名系统
        </div>
      </van-col>
    </van-row>

  </div>
</template>
<script>
  import {Dialog} from "vant";
  export default {
    name: "appIndex",
    data() {
      return {
        isCollapse: false,
        showServiceTag: false,
        show: false,
        closeIcon: 'bars',
        showMyIcon: false
      }

    },
    created() {
      let token = this.getToken();
      if(token){
        this.showMyIcon = false;
      }
    },
    mounted() {},
    methods: {
      jumpNav(pathName){
        this.show = false
        this.$router.push({name:pathName});
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      showPopup() {
        this.show = true;
      },
      closeNav(val){
        this.show = false
      },
      jumpMy(){
        this.$router.push({name:'myIndex'});
      },
      forwardService(){
        // this.$router.push({name:'service'});
        // location.href = "tencent://Message/?Menu=YES&Uin=271927964&websiteName=im.qq.com";
        this.showServiceTag = ! this.showServiceTag;
      },
    }
  };
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.top{
  position: fixed;
  top: 0;
  z-index: 20;
  background: #FE5722;
  width: 100%;
  height: 40px;
  padding: 10px 0px;
  overflow: hidden;
}
.top .van-col{
  font-size: 24px;
}
.top .van-col span{
  color: white;
  display: inline-block;
}
.top .van-col .myIcon{
  width: 35px;
  height: 35px;
  border-radius: 35px;
}

.logoWrap{
  display: flex;
  justify-content: space-around;
  align-items:center;
  padding: 0px 22px;
}
.logoWrap img{

}
.footer{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 20px;
  background-color:#F5F5F5;
}

.service-img{
  position: fixed;
  top: 60px;
  right: 0px;
  z-index: 50;
  background-color:#F5F5F5;
  width: 200px;
}
</style>
